<template>
   <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline"  class="formInline"  ref="formInline"  
            label-width="90px" slot="form">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="通知名称">
                            <el-input v-model="formInline.name" placeholder="请输入通知名称"></el-input>
                        </el-form-item>
                    </el-col>
                      <el-col :span="8">
                        <el-form-item label="创建人">
                            <el-input v-model="formInline.creator" placeholder="请输入创建人"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="状态">
                          <el-select v-model="formInline.status" placeholder="请选择状态" 
                          style="width:100%">
                                <el-option v-for="(item,index) in statusArr" 
                                :key="index" :label="item.statusName" 
                                :value="item.statusId"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                        <el-button type="primary" @click="search">查询</el-button>
                </div>
                
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="deleteRoleLots">批量删除</el-button>
                    <el-button @click="showAdd">添加</el-button>
                </div>
            </div>
            <el-table :data="AnnounceList" style="width: 100%" 
            border @selection-change="handleSelectionChange" ref="multipleTable" v-loading="loading">
                <el-table-column type="selection" width="55" align="center" :selectable="selectable"></el-table-column>
                <el-table-column align="center" label="通知名称" prop="pId" min-width="200px">
                    <template scope="scope">
                         <span class="link-src" @click="check(scope.row)">{{scope.row.name?scope.row.name:'--'}}</span>
                    </template>
                </el-table-column>
                 <el-table-column align="center" label="创建人">
                     <template scope="scope">
                        {{scope.row.creator?scope.row.creator:''}}
                    </template>
                </el-table-column>
                 <el-table-column align="center" label="创建时间" min-width="170px">
                     <template scope="scope">
                        {{scope.row.createTime?scope.row.createTime.substring(0,16):'--'}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="发布时间" min-width="170px">
                     <template scope="scope">
                        {{scope.row.uploadTime?scope.row.uploadTime.substring(0,16):'--'}}
                    </template>
                </el-table-column>
                 <el-table-column align="center" label="状态">
                       <template scope="scope">
                        {{scope.row.status=='1'?'上线':'下线'}}
                    </template>
                </el-table-column>
                <el-table-column align="left" label="操作" width="230px">
                    <template scope="scope">
                        <el-button v-if="scope.row.status=='0'&& this.roleType!==5" type="text" class="btn-success"
                         @click="edit(scope.row)">编辑</el-button>
                        <el-button v-if="scope.row.status=='0' && this.roleType!==5" type="text" class="btn-success"
                         @click="deleteListOne(scope.row)">删除</el-button>
                        <el-button type="text" class="btn-success" v-if="this.roleType!==5" @click="onlineOrDown(scope.row)">
                            {{scope.row.status=='0'?'上线':'下线'}}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" 
                :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>
<script>
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import { listSchoolNews, batchRemoveSchoolNews, downLine, onLine} from 'api/schoolNotice';
export default {
    name: 'schoolnoticeList',
    components: { TableLayout },
    data() {
        return {
            formInline: {
                name: '', // 学校通通知
                status: '', // 状态
                creator: '' // 创建人
            },
            statusArr: [
                {statusName: '全部', statusId: ''},
                {statusName: '上线', statusId: '1'},
                {statusName: '下线', statusId: '0'}
            ],
            AnnounceList: [],
            multipleSelection: [], // 勾选的表格的项目
            loading: true, // 查询时的加载提示
            listQuery: { // 分页
                page: 1,
                total: 0
            }
        }
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },

    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表

        }),
        ...mapGetters(['uid', 'schoolId', 'roleType'])
    },
    created() {
        this.searchFetchData();
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        selectable(rows) {// 符合的才可以勾选
            return rows.status==='0'
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // 查看
        check(row) {
            let id=row.id,
                status='1';
            this.$router.push({path: `/schoolNotice/checkNotice/${id}/${status}`})
        },
        // 编辑
        edit(row) {
            let id=row.id,
                status='2';
            this.$router.push({path: `/schoolNotice/updateNotice/${id}/${status}`})
        },
       // 添加和修改
        showAdd() {
            this.$router.push({path: '/schoolNotice/addNotice'})
        },
         // 单个删除
        deleteListOne(row) {
            this.$confirm('确定删除？', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: ' ', // warning
                title: '  '
            }).then(() => {
                this.loading = true;
                let id=row.id;
                this.detele(id);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 批量删除
        deleteRoleLots() {
            let id = '';
            for (let i = 0; i < this.multipleSelection.length; i++) {
                id += this.multipleSelection[i].id + ',';
            }
            id = id.substring(0, id.length - 1)
            if (id.length == 0) {
                this.$message({
                    type: 'info',
                    message: '请选择需要删除的通知!'
                });
                return;
            }
            this.$confirm('此操作将批量删除选中项, 是否继续?', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.loading = true;
                this.detele(id);
            }).catch(() => {
                this.$message.info('已取消删除')
            });
        },
        // 删除
        detele(id) {
            batchRemoveSchoolNews(id).then(res => {
                this.$message.success('已删除!')
                this.searchFetchData();
            }).catch(() => {
                this.loading=false
            });
        },
        // 上线还是下线
        onlineOrDown(row) {
            let id=row.id,
                classId=row.classId,
                status=row.status=='0'?'1':'0',
                warnTitle=row.status=='0'?'确定上线？':'确定下线？',
                successTitle=row.status=='0'?'已上线':'已下线';
            this.$confirm(warnTitle, ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                this.loading = true;
                this.updateNewsStatus(id, status, successTitle, classId);
            }).catch(() => {
                this.$message.info('已取消操作')
            });
        },
        updateNewsStatus(id, status, successTitle, classId) {
            if (status=='0') {// 下线
                downLine(id, status, this.schoolId, classId).then(res => {
                    this.$message.success(successTitle);
                    this.searchFetchData();
                });
            }
            if (status=='1') {// 上线
                onLine(id, status, this.schoolId, classId).then(res => {
                    this.$message.success(successTitle);
                    this.searchFetchData();
                });
            }
        },
       
        // 查询列表
        searchFetchData() {
            this.loading = true;
            let curPage = this.listQuery.page,
                pageSize = this.config.pageSize,
                schoolId=this.schoolId,
                name=this.formInline.name,
                creator=this.formInline.creator,
                status=this.formInline.status;
            listSchoolNews(curPage, pageSize, schoolId, name, status, creator).then(res => {
                this.AnnounceList=res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
                this.loading = false;
            }).catch(() => {
                this.loading=false
            });
        },
        // 查询列表
        search() {
            this.listQuery.page = 1;
            this.searchFetchData();
        },
          // 分页
        handleSizeChange(val) {
            this.loading = true;
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss" scoped>
.check-notice{
    color: #37a1fb;
}
</style>


